define(function(require, exports, module) {
  require('css!https://cdn.bootcdn.net/ajax/libs/select2/4.0.9/css/select2.min.css')
  require('select2')

  var compositeOperations = [
    'source-over', 
    'source-in',
    'source-out',
    'source-atop',
    'destination-over',
    'destination-in',
    'destination-out',
    'destination-atop',
    'lighter',
    'copy',
    'xor',
    'multiply',
    'screen',
    'overlay',
    'darken',
    'lighten',
    'color-dodge',
    'color-burn',
    'hard-light',
    'soft-light',
    'difference',
    'exclusion',
    'hue',
    'saturation',
    'color',
    'luminosity'
  ]

  var $html = $('<select>').append('<option value="" style="display:none">');
  _.each(compositeOperations, function(item) {
    $html.append(`<option value="${item}">${item}</option>`)
  })

  return function composite(setVal, $elem) {
    $html.change(function() {
      setVal && setVal($(this).val());
    })

    $elem && $elem.append($html);
    $html.select2({
      placeholder: '请选择一种合成方式',
      width: 200
    });

    return $html;
  }
})
